<%--
  Created by IntelliJ IDEA.
  User: ll
  Date: 2022/9/20
  Time: 9:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<html>
<head>
    <title>Title</title>
    <script src="webjars/jquery/3.6.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/dist/css/bootstrap.min.css">
    <script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
 <div class="panel panel-primary">
     <div class="panel-heading">
         <h2 class="panel-title">
            <h3>
                学生表(jsp+BS)
            </h3>
         </h2>
     </div>
     <table class="table table-hover">
         <!-- On rows -->
         <tr class="active">
             <td>学号</td>
             <td>姓名</td>
             <td>性别</td>
             <td>年龄</td>
             <td>住址</td>
             <td>所在班级</td>
             <td>操作</td>
         </tr>
<%--         <tr class="success">...</tr>--%>
<%--         <tr class="warning">...</tr>--%>
<%--         <tr class="danger">...</tr>--%>
<%--         <tr class="info">...</tr>--%>

         <!-- On cells (`td` or `th`) -->
         <c:forEach items="${byPage.rows}" var="stu">
         <tr>
             <td class="active">${stu.sid}</td>
             <td class="success">${stu.sname}</td>
             <td class="warning">${stu.sex}</td>
             <td class="danger">${stu.age}</td>
             <td class="info">${stu.addr}</td>
             <td>${stu.cname}</td>
             <td>
             <a href="#" class="btn btn-success btn-sm">修改</a>
             <a href="#" class="btn btn-danger btn-sm">删除</a>
             </td>
         </tr>
         </c:forEach>
     </table>
     <div class="panel-footer text-right">
<%--         条件查询--%>
    <form class="form-inline" style="float:left;margin-top: 10px;" name="form1" action="/student?cmd=search" method="post">
        <input type="hidden" name="page" id="page">
        <div class="form-group">
            <input type="text" class="form-control" name="sname" value="${param.sname}" placeholder="输入姓名">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="addr" value="${param.addr}" placeholder="输入住址">
        </div>
        <select class="form-control" name="cid">
            <option value="0">所有班级</option>
            <c:forEach items="${classes}" var="c">
                <option value="${c.cid}" ${param.cid == c.cid ? 'selected' : ''}>${c.cname}</option>
            </c:forEach>
        </select>
        <button type="submit" class="btn btn-default">查询</button>
        <button type="button" class="btn btn-primary" onclick="addUI()">添加</button>
    </form>
<%--         //分页--%>
         <nav aria-label="Page navigation">
             <ul class="pagination">
                 <li>
                     <a href="#" aria-label="Previous">
                         <span aria-hidden="true">&laquo;</span>
                     </a>
                 </li>
                 <c:forEach begin="1" end="${byPage.totalPage}" var="p">
                     <%--param.page相当于：request.getParameter("page")--%>
                     <li class="${p == param.page ? 'active' : ''}">
                         <a href="#" onclick="skipPage(${p})">${p}</a>
<%--                         <a href="/student/findByPage&page=${p}" >${p}</a>--%>
                     </li>
                 </c:forEach>
                 <li>
                     <a href="#" aria-label="Next">
                         <span aria-hidden="true">&raquo;</span>
                     </a>
                 </li>
             </ul>
         </nav>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="title">添加学生</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="sname" placeholder="学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">性别：</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="sex"  value="男" >男
                                    </label>
                                    <label>
                                        <input type="radio" name="sex"  value="女" >女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="age" placeholder="学生年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">住址：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="addr" placeholder="学生住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">班级：</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="cid">
                                    <option value="0">所有班级</option>
                                    <c:forEach items="${classes}" var="c">
                                        <option value="${c.cid}" ${param.cid == c.cid ? 'selected' : ''}>${c.cname}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                    <button type="button" class="btn btn-primary">保存(S)</button>
                </div>
     </div>
 </div>
</div>
</body>
</html>
<script>
    //1. 点击了分页按钮后执行的函数
    function skipPage(p){
        //1.1 为表单隐藏域赋值
        $("#page").val(p);
        //1.2 提交表单
        document.form1.submit();
    }
    //2. 添加学生
    function addUI(){
        $("#myModal").modal("show")
    }
</script>